
@unit 		: 		rpx;

// 正方形
.square (@size) {
  width: unit(@size, @unit);
  height: unit(@size, @unit);
}

// 尺寸
.size (@w, @h) {
  width: unit(@w, @unit);
  height: unit(@h, @unit);
}

// 圆
.circle (@w, @h, @r: 50%) {
  .size(@w, @h);
  border-radius: @r;
}

// 居中
.m-center (@space) {
	margin: unit(@space, @unit) auto;
}

.position (@type: absolute, @top: 0, @left: 0) {
	position: @type;
	top: unit(@top, @unit);
	left: unit(@left, @unit);
}

.p-center () {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex () {
	display: flex;
	align-items: center;
}

.f-end () {
	.flex();
	justify-content: flex-end;
}

.f-center () {
	.flex();
  justify-content: center;
}

.f-center-space () {
	.flex();
  justify-content: space-between;
}

.font (@size, @line, @color, @center: center ) {
  font-size: unit(@size, @unit);
  color: @color;
  text-align: @center;
  line-height: unit(@line, @unit);
}

.text-overflow-one () {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.back-gradient (@back) {
	background: linear-gradient(@back);
}

.back-image (@src, @position, @repeat, @size) {
  background-image: url(@src);
  background-position: @position;
  background-repeat: @repeat;
  background-size: @size;
}

.back-color (@color) {
  background-color: @color;
}

// 动画
.transition (@tr: all .3s) {
	transition: @tr;
}

// 边框相关
.radius (@radius) {
	border-radius: unit(@radius, @unit);
}

// box相关
.shadow (@shadow) {
	box-shadow: @shadow;
}

.boxing (@sizing: border-box) {
	box-sizing: @sizing;
}

.text-row-overflow (@row: 2) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: @row;
	text-overflow: ellipsis;
	overflow: hidden;
}